<template>
  <div class="recommend">
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipimg" :key="item.id"
          ><img :src="item.pic" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="recom-warp">
      <h1 class="remd_tl">编辑推荐</h1>
      <van-grid :column-num="3">
        <van-grid-item
          v-for="item in edit"
          :key="item.id"
          :text="item.name"
          @click="goDetail('/recomedlist', item.id)"
        >
          <template #icon>
            <div class="img-box">
              <img :src="item.picUrl" alt="" />
              <div class="play">
                <van-icon name="audio" />
                <span>{{ numberFormat(item.playCount) }}</span>
              </div>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
      <h1 class="remd_tl">最新音乐</h1>
      <div class="remd_newsg" v-for="(item, index) in music" :key="index">
        <div class="m-sgitem">
          <div class="sgfr">
            <div class="sgchfl" @click="goDetail('/playmusicB', item.id)">
              <p class="fl-top f-thide">
                {{ item.name }}
                <span class="sgalia" v-show="item.song.alias[0] ? true : false"
                  >( {{ item.song.alias[0] }} )</span
                >
              </p>
              <p class="fl-btn f-thide">
                <i class="img_heat"></i>
                {{ item.song.artists[0].name }}
                -
                {{ item.song.album.name }}
              </p>
            </div>
            <div class="sgchfr">
              <span class="img_play"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getEdit, getMusic, getSwip } from '@/api/remomoned'
export default {
  data: () => ({
    edit: [],
    music: [],
    limit: 6,
    flag: true,
    swipimg: []
  }),
  created() {
    this.getEdit()
    this.getMusic()
    this.getSwip()
  },
  methods: {
    async getEdit() {
      const res = await getEdit(this.limit)
      this.edit = res.data.result
    },
    async getMusic() {
      const res = await getMusic()
      this.music = res.data.result
    },
    async getSwip() {
      const res = await getSwip()
      console.log(res)
      this.swipimg = res.data.banners
      console.log(this.swipimg);
    },
    numberFormat(value) {
      var param = {}
      var num = 0
      var k = 10000,
        sizes = ['', '万', '亿', '万亿'],
        i
      if (value < k) {
        param.value = value
        param.unit = ''
      } else {
        i = Math.floor(Math.log(value) / Math.log(k))
        param.value = ((value / Math.pow(k, i))).toFixed(1)
        param.unit = sizes[i]
      }
      num = param.value + param.unit
      return num
    }
  }
}
</script>
<style lang="less" >
.recommend {
  .swipe {
    padding: 0px 5px;
    margin-top: 15px;
    .van-swipe {
      border-radius: 10px;
    }
    img {
      width: 100%;
      height: 150px;
    }
  }
  .recom-warp {
    padding-top: 20px;
    .remd_tl {
      position: relative;
      padding-left: 9px;
      font-size: 17px;
      line-height: 20px;
      font-weight: 400;
      margin-top: 0px;
      &::after {
        content: " ";
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -9px;
        width: 2px;
        height: 16px;
        background-color: #d33a31;
      }
    }
    .van-grid-item__content::after {
      border: none;
    }
    .van-grid-item__content {
      padding: 0px;
      margin-bottom: 16px;
    }
    .van-hairline--top::after {
      border: none;
    }
    .img-box {
      img {
        width: 123px;
        height: 123px;
      }
      .play {
        position: absolute;
        right: 5px;
        top: 2px;
        color: #fff;
        font-size: 12px;
      }
    }
    .van-grid-item__text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      padding: 6px 2px 0 6px;
      line-height: 1.2;
      font-size: 13px;
      color: #333;
    }
    .van-grid {
      padding-bottom: 24px;
    }
    .remd_newsg {
      .m-sgitem {
        display: flex;
        color: #333;
        padding-left: 10px;
        .sgfr {
          display: flex;
          flex: 1 1 auto;
          .sgchfl {
            padding: 6px 0;
            flex: 1 1 auto;
            .f-thide {
              font-size: 17px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
            }
            .fl-top {
              margin: 0px;
              .sgalia {
                color: #888;
              }
            }
            .fl-btn {
              margin: 0px;
              font-size: 12px;
              color: #888;
              .img_heat {
                display: inline-block;
                width: 12px;
                height: 8px;
                margin-right: 4px;
                background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=)
                  no-repeat;
                background-size: 166px 97px;
              }
            }
          }
          .sgchfr {
            display: flex;
            align-items: center;
            padding: 0 10px;
            .img_play {
              display: inline-block;
              width: 22px;
              height: 22px;
              background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=)
                no-repeat;
              background-position: -24px 0;
              background-size: 166px 97px;
            }
          }
        }
      }
    }
  }
}
</style>
